<template>
	<div class="system_config_wrapper">
		<el-row :gutter="24">
			<el-col :span="12" v-for="item in numberList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<sw-number-input size="medium" v-model="item.name" :disabled="!$isHasAuth(['ee9d4e5162e84592b77220cbb011b6e5'])"></sw-number-input>
						<!-- <span class="unit"></span> -->
						<el-button size="medium" type="primary" v-hasPermi="'ee9d4e5162e84592b77220cbb011b6e5'" @click="handleSaveData(item)">保存</el-button>
					</dd>
				</dl>
			</el-col>
			<el-col :span="12" v-for="item in switchList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<el-switch
							v-model="item.name"
							:active-value="item.switch.active"
							:inactive-value="item.switch.inactive"
							:disabled="!$isHasAuth(['ee9d4e5162e84592b77220cbb011b6e5'])"
						></el-switch>
					</dd>
				</dl>
			</el-col>
			<el-col :span="12" v-for="item in enumerateList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<el-button size="medium" type="text" @click="handleLookEnum(item)">查看子级</el-button>
					</dd>
				</dl>
			</el-col>
			<el-col :span="12" v-for="item in textInputList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<el-input size="medium" v-model="item.name" :disabled="!$isHasAuth(['ee9d4e5162e84592b77220cbb011b6e5'])"></el-input>
						<el-button size="medium" type="primary" v-hasPermi="'ee9d4e5162e84592b77220cbb011b6e5'" @click="handleSaveData(item)">保存</el-button>
					</dd>
				</dl>
			</el-col>
			<el-col :span="24" v-for="item in radioList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<el-radio-group v-model="item.name" :disabled="!$isHasAuth(['ee9d4e5162e84592b77220cbb011b6e5'])">
							<template v-for="n in item.options">
								<template v-if="'img' in n">
									<div class="img_box">
										<show-img :img-id="n.img"></show-img>
										<el-radio :label="n.value">{{ n.label }}</el-radio>
									</div>
								</template>
								<template v-else>
									<el-radio :label="n.value">{{ n.label }}</el-radio>
								</template>
							</template>
						</el-radio-group>
					</dd>
				</dl>
			</el-col>
			<el-col :span="24" v-for="item in textAreaList" :key="item.id">
				<dl>
					<dt>{{ item.content }}：</dt>
					<dd>
						<el-input type="textarea" size="medium" v-model="item.name" :disabled="!$isHasAuth(['ee9d4e5162e84592b77220cbb011b6e5'])"></el-input>
						<el-button size="medium" type="primary" v-hasPermi="'ee9d4e5162e84592b77220cbb011b6e5'" @click="handleSaveData(item)">保存</el-button>
					</dd>
				</dl>
			</el-col>
		</el-row>
		<enum-drawer v-model="dictDrawer" :dict-id="dictId"></enum-drawer>
	</div>
</template>

<script>
import enumDrawer from '../dict/data';
import { getDictDefineList, updateDictDefine } from '@/api/system/tbSysDictDefinition';
export default {
	components: { enumDrawer },
	data() {
		return {
			confifDictList: [],
			numberList: [],
			switchList: [],
			enumerateList: [],
			radioList: [],
			textInputList: [],
			textAreaList: [],
			dictDrawer: false,
			dictId: ''
		};
	},
	computed: {
		confifDictListData() {
			return this.confifDictList.map((item) => {
				let obj = { ...item };
				let datas = JSON.parse(obj.configJson);
				obj['showType'] = datas.type;
				if (datas.type === '2') {
					obj['switch'] = datas.switch;
				} else if (datas.type === '4') {
					obj['options'] = datas.options;
				}
				return obj;
			});
		}
	},
	watch: {
		confifDictListData(arr) {
			this.numberList = arr.filter((item) => item.showType === '1');
			this.switchList = arr.filter((item) => item.showType === '2');
			this.enumerateList = arr.filter((item) => item.showType === '3');
			this.radioList = arr.filter((item) => item.showType === '4');
			this.textInputList = arr.filter((item) => item.showType === '5');
			this.textAreaList = arr.filter((item) => item.showType === '6');
		}
	},
	mounted() {
		this.getConfigDictList();
	},
	methods: {
		//获取字典定义
		async getConfigDictList() {
			let params = { page: 1, limit: 9999, isConfig: '1' };
			let result = await getDictDefineList(params).then((res) => res.data);
			if (result.code === '0') {
				this.confifDictList = result.data || [];
			}
		},

		//查看枚举
		handleLookEnum(data) {
			this.dictId = data.id;
			this.dictDrawer = true;
		},

		async handleSaveData(data) {
			let result = await updateDictDefine(data).then((res) => res.data);
			if (result.code === '0') {
				this.$store.dispatch('getOpenDictData');
				this.$showCustomMessage('success', `保存成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.system_config_wrapper {
	height: 100%;
	overflow: auto;
	padding: 24px;
	box-sizing: border-box;
	background-color: #fff;

	.el-col {
		margin-bottom: 24px;
	}

	.el-col-24 {
		dl {
			align-items: flex-start;
		}

		dt {
			flex: 1;
			line-height: 36px;
		}

		dd {
			flex: 4;
		}
	}

	dl {
		display: flex;
		align-items: center;
	}

	dt {
		flex: 2;
		text-align: right;
		line-height: 18px;
	}

	dd {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex: 3;
		overflow: hidden;

		&:has(.el-radio-group) {
			padding-top: 11px;
		}

		&:has(.img_box) {
			flex-wrap: wrap;
			padding-top: 0;
		}
	}

	.el-button {
		margin-left: 10px;
	}

	.el-switch {
		margin-top: 8px;
	}

	.img_box {
		float: left;
		width: 148px;
		margin-right: 16px;

		.el-image {
			width: 100%;
			margin-bottom: 10px;
		}
	}
}
</style>
